<template>
  <uv-button shape="circle" :customStyle="btnStyle" :loading="loading" @click="onClick">
    <text v-if="isText">获取验证码</text>
    <view v-else class="flex alignCenter">
      <uv-count-down :time="60 * 1000" format="ss" @finish="end"></uv-count-down>
      s后再获取
    </view>
  </uv-button>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue", "mobile"]);
let isText = ref(true);
let loading = ref(false);
let btnStyle = ref({
  boxShadow: "0 2px 8px 2px rgba(225, 225, 225, 0.53)",
});
let end = () => {
  isText.value = true;
};
let onClick = async () => {
  try {
    loading.value = true;
    if (!props.mobile) return proxy.$utils.showToast("请输入手机号");
    if (!proxy.$utils.isPoneAvailable(props.mobile))
      return proxy.$utils.showToast("请输入正确手机号");
    isText.value = false;
    await proxy.$apis.sendMsg({ phone: props.mobile });
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
</style>
